import React, {Component} from 'react';

import { nanoid } from 'nanoid'

import './index.css'
class Header extends Component {


    addTodo=(e)=>{
        const {add}=this.props
        const keyCode=e.keyCode
        const value=e.target.value
        if(keyCode!==13) return
        else {
            if(value.trim()==='') {
                alert("输入不能为空!")
                return
            }
        // 追加todo
            const todo={id:nanoid(),name:value,done:false}
            add(todo)
            e.target.value=""
        }
    }

    render() {
        return (
            <div className="todo-header">
                <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.addTodo}/>
            </div>
        );
    }
}

export default Header;